'use client'

import Link from 'next/link'
import { Message } from 'ai/react'
import { HiPlus } from "react-icons/hi"
import { LuPanelLeft } from "react-icons/lu"
import { MoreHorizontal, SquarePen } from 'lucide-react'

import { Button, buttonVariants } from '@/components/ui/button'
import { Avatar, AvatarImage } from '@/components/ui/avatar'
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger
} from '@/components/ui/tooltip'

import { cn } from '@/lib/utils'
import { avatars } from '@/mock/avatars'
import { useAvatar } from '@/hooks/use-avatar'
import ChatSessionList from './chat-session-list'

type ChatSidebarProps = {
    isCollapsed: boolean
    links: {
        name: string
        messages: Message[],
        avatar: string
        variant: 'grey' | 'ghost'
    }[]
    onClick?: VoidFunction
}

const ChatSidebar = ({ links, isCollapsed }: ChatSidebarProps) => {
    const setAvatar = useAvatar(state => state.setAvatar)
    const switchAvatar = (name: string) => {
        const avatar = avatars.find(avatar => avatar.name === name)
        if (avatar) {
            setAvatar(avatar)
        }
    }

    return (
        <div data-collapsed={isCollapsed} className='relative group flex flex-col h-full border-b gap-4'>
            <div className='h-12 p-2 border-b flex space-x-3 items-center'>
                <Button
                    variant='outline'
                    size='sm'
                    className='flex-1 border-none text-muted-foreground font-medium hover:text-primary'
                    onClick={() => { }}
                >
                    NEW SESSION
                </Button>
                <Button
                    variant='outline'
                    size='sm'
                    onClick={() => { }}
                >
                    <LuPanelLeft className='h-4 w-4' />
                </Button>
            </div>
            <ChatSessionList />
        </div>
    )
}

export default ChatSidebar